Visto che i fogli di stile incorporati hanno effetto su tutta la pagina HTML risolvono il problema della formattazione di una pagina, ma come fare se le regole di stile si vogliono applicare a tutto un sito? Cioè a più pagine? Risulta ovvio che dovrei ripetere in tutte le pagine le regole di stile impostate nella prima. Si noti però che, volendo un giorno rettificare una qualunque regola di stile, si dovrà ripetere la correzione in tutte le pagine. Volendo risolvere questo problema, ci si avvarrà dei fogli di stile esterni, ovvero si definiranno le regole di stile in un file separato che tutte le pagine andranno a leggere. Così facendo, una rettifica ad una regola di stile, avrà effetto su tutte le pagine che usano quel file.
Il file esterno dovrà essere un semplice file di testo ASCII (file di testo non formattato) al quale bisogna cambiare l'estensione da txt a css.
Nella intestazione (HEAD) della pagina, visto che le regole di stile le avremo definite nel file CSS, non avremo più il tag <STYLE>, bensì il tag <LINK> che è appunto quello che ci serve a collegare il foglio di stile esterno.
Utilizzando il tag <LINK>, ci sono tre attributi obbligatori da specificare:
Un ulteriore attributo di <LINK> da sottolineare è MEDIA. Esso indica il supporto ove lo stile va applicato. È possibile infatti definire un aspetto della pagina valido quando questa viene visualizzata a video, e anche un altro aspetto (ad esempio senza colori e più compatto) per quando la stessa pagina verrà stampata. I valori possibili per l'attributo MEDIA sono:
Nella intestazione di questa pagina è stato usato il tag <LINK> in questo modo:
<link href="stile.css" rel="stylesheet" type="text/css">
stile.css è ovviamente il file di testo dove è stato definito il presente stile. In esso si sono definite le seguenti regole:
body {
background-color: Gray;
font-family: Arial;
}
h3 {
color: Black;
border-bottom: solid;
border-left: solid;
}
p {
color: Black;
background-color: Silver;
text-align: justify;
}